<template>
  <el-dialog
    custom-class="edition-dialog"
    :visible="visible"
    width="560px"
    :title="title"
    @close="close"
  >
      <!-- 内容展示 -->
      <!-- 方法一：插值 -->
      <div v-if="content">{{content}}</div>
      <span slot="footer" class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="close">确 定</el-button>
      </span>
  </el-dialog>
</template>

<script>
/**
 * 问题：
 *     需要非常多的代码片段来支持，会使我们的组件变得非常杂乱，只为了一个提示弹窗
 *     而且既然是项目的提示弹窗，那么基本在很多地方都会用到，这样一个组件一个组件去写肯定不是办法。
 * 解决方法一：
 *     定义个全局组件，弹窗的标题，内容由props传入，但还是要由外部去控制它的显示隐藏
 *     缺点：要定义变量与方法，而且要在template中写好标签，还是显得麻烦
 *
 * 解决方法二：
 *     函数调用的方式，比如通过this.$dialog()的方式调用，像调用element的message组件一样方便。
 */
export default {
  name: 'Dialog2',
  data () {
    return {
      title: '',
      content: '',
      visible: true
    }
  },
  methods: {
    close () {
      console.log('this',this);
      this.$el.parentNode.removeChild(this.$el)
    }
  }

}

</script>

<style>
</style>
